<!DOCTYPE HTML>
<html>

<head>

    <meta charset="utf-8">
    <title>JS实验室-通讯录演示</title>
    <link rel="shortcut icon" href="../../res/logo_main.png" />
    <link href="../public.css" type="text/css" rel="stylesheet" />
    <script src="https://cdn.tailwindcss.com"></script>
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#4F46E5',
                        secondary: '#10B981',
                        dark: '#1F2937',
                        light: '#F9FAFB'
                    },
                    fontFamily: {
                        sans: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            },
            corePlugins: {
                preflight: false,
            }
        }
    </script>
    <link href="add_list.css" type="text/css" rel="stylesheet" />
    <!-- 引入图标 -->
    <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">

    <meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
</head>

<body>
    <!-- 通用页脚 -->
    <!-- 通用导航栏 -->
    <nav id="main-nav">
        <!-- logo与标题部分 -->
        <div class="icon-title">
            <a href="../main_page/index.html"><img src="../../res/logo_main.png" height="35px" /></a>
            <a href="../main_page/index.html">
                <h1>个人学习成果展示</h1>
            </a>
        </div>

        <!-- 页面导航部分 -->
        <div class="nav-links">
            <div class="nav-link">
                <a href="../product_show_page/index.html">
                    <img src="../../res/product_icon.png" width="20px" />
                    <span>作品展示</span>
                </a>
                <div class="drop-menu">
                    <a href="../product_show_page/wpg_show.html">Windows进程守护工具</a>
                    <a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a>
                    <a href="../product_show_page/personal_blog_show.html">个人博客网站</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../notes_extract_page/index.html">
                    <img src="../../res/note_icon.png" width="20px" />
                    <span>笔记摘选</span>
                </a>
                <div class="drop-menu">
                    <a href="../notes_extract_page/html_note_page.html">HTML篇</a>
                    <a href="../notes_extract_page/css_note_page.html">CSS篇</a>
                    <a
                        href="../notes_extract_page/js_note_page.html">JavaScript篇&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../info_links_page/index.html">
                    <img src="../../res/infomation_icon.png" width="20px" />
                    <span>资料链接</span>
                </a>
                <div class="drop-menu">
                    <a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a>
                    <a
                        href="../info_links_page/python_info_page.html">Python&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../info_links_page/web_info_page.html">Web</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../js_lab_page/index.html">
                    <img src="../../res/lab_lcon.png" width="20px" />
                    <span>JS实验室</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../js_lab_page/sort_demo_page.html">排序演示&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../js_lab_page/shape_draw_page.html">图形绘制</a>
                    <a href="../js_lab_page/address_list_page.html">通讯录演示</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../CV_show_page/index.html">
                    <img src="../../res/cv_icon.png" width="20px" />
                    <span>简历查看</span>
                </a>
                <div class="drop-menu">
                    <a
                        href="../CV_show_page/online_view_page.html">在线查看&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</a>
                    <a href="../CV_show_page/index.html">简历下载</a>
                    <a href="../CV_show_page/index.html">联系方式</a>
                </div>
            </div>
            <div class="nav-link">
                <a href="../admin_entrance_page/index.html" target="_blank">
                    <img src="../../res/admin_icon.png" width="20px" />
                    <span>管理员入口</span>
                </a>
            </div>
        </div>
        <!-- 时间显示部分 -->
        <div class="time-show">
            <p id="current-date"></p>
            <p id="current-time"></p>
        </div>
        <!-- 注册＆登录部分 -->
        <div class="register-login">
            <button id="registerBtn">注册</button>
            <span>丨</span>
            <button id="loginBtn">登录</button>
        </div>
    </nav>

    <!-- 主页主体部分 -->
    <section class="main-body">
        <!--Banner图 -->
        <div class="banner-box">
            <img src="../../res/banner (3).png" alt="banner图">
            <h1 class="slogan" id="typewriter" style="min-width: 900px;">通讯录演示</h1>
        </div>
        <div style="width: 70%; margin:20px 0;">
            <div class="grid-container">
                <!-- 左侧：联系人列表 -->
                <div class="contacts-section">
                    <div class="contacts-card">
                        <div class="card-header">
                            <h2><i class="fa fa-list-ul"></i>联系人列表</h2>
                            <div class="search-container">
                                <input type="text" id="search-input" placeholder="搜索联系人...">
                                <i class="fa fa-search"></i>
                            </div>
                        </div>

                        <div id="contacts-container">
                            <div id="empty-state">
                                <div class="empty-icon">
                                    <i class="fa fa-book"></i>
                                </div>
                                <h3>暂无联系人</h3>
                                <p>点击右侧"添加联系人"按钮开始创建你的联系人列表</p>
                            </div>

                            <div id="contacts-list" class="hidden">
                                <!-- 联系人项将通过 JavaScript 动态生成 -->
                            </div>
                        </div>

                        <div class="card-footer">
                            <div id="contact-count">0 个联系人</div>
                            <div class="actions">
                                <button id="sort-name"><i class="fa fa-sort-alpha-asc"></i> 按姓名排序</button>
                                <button id="clear-all"><i class="fa fa-trash-o"></i> 清空列表</button>
                            </div>
                        </div>
                    </div>
                </div>

                <!-- 右侧：添加/编辑表单 -->
                <div class="form-section">
                    <div class="form-card">
                        <div class="card-header">
                            <h2 id="form-title"><i class="fa fa-user-plus"></i>添加联系人</h2>
                        </div>

                        <form id="contact-form">
                            <input type="hidden" id="contact-id">

                            <div class="form-group">
                                <label for="name">姓名</label>
                                <div class="input-container">
                                    <i class="fa fa-user"></i>
                                    <input type="text" id="name" required placeholder="请输入姓名">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="phone">电话号码</label>
                                <div class="input-container">
                                    <i class="fa fa-phone"></i>
                                    <input type="tel" id="phone" required placeholder="请输入电话号码">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="email">电子邮箱</label>
                                <div class="input-container">
                                    <i class="fa fa-envelope"></i>
                                    <input type="email" id="email" placeholder="请输入电子邮箱">
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="address">住址</label>
                                <div class="input-container">
                                    <i class="fa fa-home"></i>
                                    <input id="address" rows="3" placeholder="请输入住址">
                                </div>
                            </div>

                            <div class="form-actions">
                                <button type="submit" id="submit-btn">
                                    <i class="fa fa-check"></i> 保存
                                </button>
                                <button type="button" id="cancel-btn">
                                    <i class="fa fa-times"></i> 取消
                                </button>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

            <!-- 确认对话框 -->
            <div id="confirm-dialog">
                <div class="dialog-content">
                    <h3 id="dialog-title">确认删除</h3>
                    <p id="dialog-message">您确定要删除此联系人吗？此操作无法撤销。</p>
                    <div class="dialog-actions">
                        <button id="dialog-confirm">确认删除</button>
                        <button id="dialog-cancel">取消</button>
                    </div>
                </div>
            </div>

            <!-- 通知提示 -->
            <div id="notification">
                <i id="notification-icon"></i>
                <span id="notification-message">操作成功</span>
            </div>

        </div>
    </section>

    <footer class="main-footer">
        <!-- 页脚链接列表 -->
        <div class="footer-lists">
            <div class="footer-list">
                <dl>
                    <dt><a href="../product_show_page/index.html">作品展示</a></dt>
                    <dd><a href="../product_show_page/wpg_show.html">Windows进程守护工具</a></dd>
                    <dd><a href="../product_show_page/tomato_cube_show.html">《番茄魔方》时间管理工具</a></dd>
                    <dd><a href="../product_show_page/personal_blog_show.html">个人博客网站</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../notes_extract_page/index.html">笔记摘选</a></dt>
                    <dd><a href="../notes_extract_page/html_note_page.html">HTML篇</a></dd>
                    <dd><a href="../notes_extract_page/css_note_page.html">CSS篇</a></dd>
                    <dd><a href="../notes_extract_page/js_note_page.html">JavaScript篇</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../info_links_page/index.html">资料链接</a></dt>
                    <dd><a href="../info_links_page/c_and_cpp_info_page.html">C/C++</a></dd>
                    <dd><a href="../info_links_page/python_info_page.html">Python</a></dd>
                    <dd><a href="../info_links_page/web_info_page.html">Web</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../js_lab_page/index.html">JS实验室</a></dt>
                    <dd><a href="../js_lab_page/sort_demo_page.html">排序演示</a></dd>
                    <dd><a href="../js_lab_page/shape_draw_page.html">图形绘制</a></dd>
                    <dd><a href="../js_lab_page/address_list_page.html">通讯录演示</a></dd>
                </dl>
            </div>
            <div class="footer-list">
                <dl>
                    <dt><a href="../CV_show_page/index.html">简历查看</a></dt>
                    <dd><a href="../CV_show_page/online_view_page.html">在线查看</a></dd>
                    <dd><a href="../CV_show_page/index.html">简历下载</a></dd>
                    <dd><a href="../CV_show_page/index.html">联系方式</a></dd>
                </dl>
            </div>
        </div>
        <!-- 分割线 -->
        <div class="footer-separation"></div>
        <!-- 其他信息 -->
        <div class="other-info">
            <p style="margin-top: 0;">我的邮箱：h2892197119@foxmail.com</p>
            <span>友情链接：</span>
            <a href="https://blog.morely.top" class="friend-link" target="_blank"><img src="../../res/logo_main.png"
                    width="15px" style="margin:0px 5px 0px 5px;">陌离的个人博客</a>
            <p>本网站仅用于学习展示，部分素材取自网络；<br />如有侵权请联系本人进行删除。</p>
        </div>
    </footer>
    <!-- 版权信息 -->
    <div class="copyright-info">
        Copyright &copy;2025 个人学习成果展示网站
    </div>

    <script type="text/javascript" src="../login_register_window.js"></script>
    <script type="text/javascript" src="../public.js"></script>
    <script type="text/javascript" src="address_db.js"></script>
</body>

</html>